{# The search row over every owner's transcripts and notes
   (overseer_meeting_search): typing re-requests the page with ``q``; each
   hit opens its meeting in the drawer at the line it is. #}
{% from "components/macros/layout.html" import card %}
{% from "components/macros/form.html" import search_input %}
<div id="meetings-search" class="space-y-3">
  <form {{ hx_replace(search.url, "#overseer-main") }} hx-trigger="keyup changed delay:300ms from:input[name=q], search, submit"
        class="flex flex-wrap items-center gap-3">
    {{ search_input("q", search.q, placeholder="Search what was said", attrs='autocomplete="off"') }}
  </form>
  {% if search.hits is not none %}
  {% call card(None) %}
  <div id="meetings-search-hits">
    {% if search.hits %}
    <ul class="divide-y divide-aegis-border text-sm">
      {% for hit in search.hits %}
      <li data-search-hit>
        <a href="{{ hit.url }}" {{ hx_replace(hit.url, "#overseer-main") }} class="flex gap-3 py-2 hover:text-aegis-teal">
          <span class="w-40 shrink-0 text-xs tabular-nums text-aegis-muted">{{ hit.when }}</span>
          <span class="w-32 shrink-0 truncate font-semibold">{{ hit.who }}</span>
          <span data-said class="min-w-0 leading-relaxed">{{ hit.text }}</span>
        </a>
      </li>
      {% endfor %}
    </ul>
    {% else %}
    <p class="text-sm text-aegis-muted">{{ search.empty }}</p>
    {% endif %}
  </div>
  {% endcall %}
  {% endif %}
</div>